<template>
  <div class="bind">
    <group label-width="6em"
           label-margin-right="2em"
           label-align="right"
           gutter='0'>
      <!-- <x-input title="姓名"
               v-model="userInfo.realName"
            placeholder="姓名"></x-input>
      <x-input title="手机号"
               :max="11"
               type="tel"
               placeholder="请输入手机号码"
               keyboard="number"
               v-model="userInfo.userMobile"
               class="input">
        <span slot="right"
              class="vi"
              v-show="show"
              @click="getCode"> 获取验证码</span>
        <span slot="right"
              class="vi count"
              v-show="!show"> {{count}}s重新获取</span>
      </x-input>
      <x-input title="验证码"
               placeholder="请输入验证码"
               keyboard="number"
               is-type="tel"
               v-model="verNumb"
               @on-change='active=true'></x-input>-->
      <popup-picker title="选择卡种类"
                    :data="cards"
                    v-model="card"
                    value-text-align="left"
                    placeholder="请选择卡类型"
                    show-name></popup-picker>
      <x-input title="购买数量"
               v-model="num"
               keyboard="number"
               placeholder="请输入数量"
               type="tel"></x-input>
      <cell title="收卡地址"
            is-link
            value-align="left"
            @click.native="addrShow = true">{{ this.addr +this.detail}}</cell>
      <x-input title="联系人姓名"
               v-model="userInfo.realName"
               placeholder="联系人姓名"></x-input>
      <x-input title="联系手机号"
               :max="11"
               type="tel"
               placeholder="请输入手机号码"
               keyboard="number"
               v-model="userInfo.userMobile"
               class="input"></x-input>
    </group>
    <div class="btn flex active"
         @click="submit">
      购买
    </div>
    <div class="notice pd40 col_999">
      <p> 开卡流程：</p>
      <p> 1.购买旅住卡后，2月4日按照付款先后顺序发货，顺丰发货。</p>
      <p> 2.旅住卡仅限本人使用，以绑定的身份证信息为准，只有开卡者本人在现场登记入住才享受旅住卡权益。</p>
      <p> 3.3月15日开放民宿客房预订，不支持电话预定，只接受网络预订，预订平台仅限XXX微信公众号平台。开放线上订房系统后，根据要求填写相关信息，完成对应操作即可。</p>
      <p> 4.旅住卡预定网络平台上的所有房型（独栋别墅除外）只要房源空置都可以预定。</p>
      <p> 5.一张卡一天只能享受一个房间优惠政策，但可连续入住（需提前网络预订）。</p>
      <p> 6.每个房间入住人数，入住规定等必须严格遵守国家酒店管理条例。</p>
      <p> 7.旅住卡以持卡者第一次办理入住计算开始时间，后续三年享受开卡权益，若三年内未绑定身份信息入住则此卡作废。</p>
      <p> 8.旅住卡有实体卡和电子卡两种形式，入住只需出示一种即可，绑定身份信息后，若卡遗失可申请补办，若遗失旅住卡者未注册电子会员卡或绑定身份信息，不予补办，后果自负。</p>
    </div>

    <toast v-model="toastshow"
           type="text"
           width="200px"
           position="moddle">{{mesg}}~</toast>
    <div class="addr"
         v-show="addrShow">
      <group label-width="4.5em"
             label-margin-right="2em"
             label-align="left"
             gutter='0'>
        <cell title="地址选择"
              value-align="left"
              :value="addr"
              is-link
              @click.native="showAddress = true"></cell>
        <x-address title="地址选择"
                   style="display:none"
                   raw-value
                   :list="addressData"
                   value-text-align="left"
                   class="addr"
                   ref="address"
                   @on-hide="chooseAddr"
                   :show.sync="showAddress"></x-address>
        <x-textarea title="详细地址"
                    placeholder="请填写详细地址"
                    :rows="3"
                    v-model="detail"
                    @on-change='textChange'></x-textarea>
      </group>
      <div class="btn flex active"
           @click="addrsubmit">
        确定
      </div>
    </div>
  </div>
</template>
<script>
import { Group, Cell, XInput, PopupPicker, Toast, XAddress, ChinaAddressV4Data, XTextarea } from 'vux'
import * as API from '../../api'
import { mapGetters } from 'vuex'
export default {
  components: {
    Group, Cell, XInput, PopupPicker, Toast, XAddress, ChinaAddressV4Data, XTextarea
  },
  data () {
    return {
      show: true,
      active: false,
      toastshow: false,
      num: '',
      detail: '',
      mesg: '',
      count: '',
      tel: '',
      verNumb: '123',
      cards: [[{ value: '1', name: '三年卡 680元/3年/7次' }, { value: '2', name: '年卡 365元/年/7次' }, { value: '3', name: '次卡 188元/次' }]],
      card: [],
      addrShow: false,
      addr: '',
      addressData: ChinaAddressV4Data,
      showAddress: false
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  created () {
    console.log(this.userInfo)
    this.getAddr()
  },
  methods: {
    submit () {
      const that = this
      console.log(this.card)
      this.toastshow = true
      if (this.card.length === 0) {
        this.mesg = '请选择卡类型'
      } else if (this.num === '') {
        this.mesg = '请填写购买数量'
      } else if (this.detail === '') {
        this.mesg = '请填写收卡地址'
      } else if (this.userInfo.realName === '') {
        this.mesg = '请填写联系姓名'
      } else if (this.userInfo.userMobile === '') {
        this.mesg = '请填写联系电话'
      } else {
        this.toastshow = false
        let data = {
          openId: this.userInfo.openId,
          cardType: this.card * 1,
          qty: this.num,
          city: this.addr,
          address: this.detail,
          contact: this.userInfo.realName,
          contactNumber: this.userInfo.userMobile
        }
        console.log(data)
        this.$http.post(API.buy, data
        ).then(res => {
          // alert('支付')
          console.log(res.data)
          if (res.data.code === 500) {
            this.toastshow = true
            this.mesg = res.data.msg
          } else if (res.data.code === 2) {
            const order = res.data.order
            that.$uniquePay
              .wechatPay({
                appId: order.appId,
                timeStamp: order.timeStamp,
                nonceStr: order.nonceStr,
                signType: order.signType,
                paySign: order.paySign,
                package: order.packageValue
              })
              .then(res => {
                console.log('微信支付成功')
                this.$router.push('/record')
              })
              .catch(err => {
                console.log(err)
              })
          }
        }).catch(err => {
          console.log(err)
        })
      }
    },
    addrsubmit () {
      this.toastshow = true
      if (this.detail === '') {
        this.mesg = '请填写详细地址'
      } else {
        this.toastshow = false
        this.$http.post(API.addr, {
          openId: this.userInfo.openId,
          city: this.addr,
          address: this.detail
        }).then(res => {
          this.addrShow = false
          this.getAddr()
        }).catch(err => {
          console.log(err)
        })
      }
    },
    chooseAddr () {
      this.addr = this.$refs.address.nameValue
    },
    textChange () {
      this.active = true
    },
    getAddr () {
      this.$http.get(API.user, {
        params: {
          openId: this.userInfo.openId
        }      }).then(res => {
        this.addr = res.data.province + ' ' + res.data.city + ' ' + res.data.area
        this.detail = res.data.address
      }).catch(err => {
        console.log(err)
      })
    }
  }

}
</script>
<style lang="scss" scoped>
@import "../../assets/style/index.scss";

.btn {
  width: 80%;
  height: 80px;
  margin: 20px auto;
  border-radius: 10px;
  background-color: #4285f6;
  color: #fff;

  &.active {
    background-color: #1799df;
  }
}
.addr {
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: fixed;
  top: 0;
}
</style>
